<!--
 * @Descripttion: 
 * @version: 
 * @Author: weni09
 * @Date: 2021-04-19 14:07:40
 * @LastEditors: weni09
 * @LastEditTime: 2021-06-04 14:16:15
 * @FilePath: \blogfastapi\frontend_blog\src\views\Archive.vue
-->
<template>
	<div class="archive">
	<el-row class="archive-row" type="flex" justify="center">
		<el-col :span="18">
		<div class="count">{{$t('header.archive')}}：{{total}} {{$t('archive.article')}}</div>
		<el-timeline>
			<el-timeline-item 
			v-for="(item, index) in articleList"
			:key="index"
			:timestamp="item.update_date"
			size="large"
			:color="item.color"
			placement="top">
			<div class="line-item">
				<router-link :to="`/artDetail/${item.id}`" tag="span">{{ item.title }}</router-link>
			</div>
			</el-timeline-item>
		</el-timeline>
		<div class="more">
					<el-button
					type="text"
					:loading="loading"
					class="load-more more-btn"
					@click="loadMore"
					:disabled="moreBtnDisabled"
					round>{{ getMoreText }}</el-button>
				</div>
			
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { fetchArticleList } from 'api';
	export default {
		name: 'archive',
		data() {
			return {
				articleList:Array,
				total:0,
				offset:0,
				moreBtnDisabled:false,
				loading:false,
				hasMore:true
			};
		},
		methods: {

			/*
			查询文章列表
			*/
			getArticleList(offset,limit){
				let params={
					offset:offset,
					limit:limit,
					sort: '-update_date'
				}
        	    fetchArticleList(params).then(res => {
        	        this.articleList = res.data || []
					this.total = res.total
					const colors = ['#409EFF','#67C23A','#E6A23C','#F56C6C','#909399']
					for (let i in this.articleList){
						let colorNum = i % 5
						this.articleList[i]['color'] = colors[colorNum]
					};
					
					if (this.articleList.length < 50){
						this.hasMore = false
					}
        	        }).catch(err => {
        	            console.log(err)
        	        });
        	},

			loadMore() {
				this.loading = true
				this.tempArticleList = [];
				let offset = this.offset + 10
            	fetchArticleList(offset,10).then(res => {
					// console.log(res.data,typeof(res.data))
                	this.articleList.push(res.data || [])
					if(res.data.length < 10){
						this.hasMore=false
					}
					else{
						this.hasMore=true
					}
					
                	}).catch(err => {
                    console.log(err)
                });
			
            },
			i18nMessage:function(){
			return this.$i18n.messages[this.$i18n.locale]
			},

		},
		computed:{
			getMoreText:function(){
				if (this.hasMore){
				this.moreBtnDisabled=false
				// console.log(this.i18nMessage())
				var moreStr = this.i18nMessage().home.more
				var loadingStr= this.i18nMessage().home.loading
					if (this.loading){
						return loadingStr
					}
					else{
						return moreStr
					}
				}
				else{
					this.moreBtnDisabled=true
					return this.i18nMessage().home.noMore
				}
			},
		},
		mounted(){
			this.getArticleList(0,50);
		},
	}
</script>

<style lang="scss" scoped>
.count{
		font-size:1.2rem;
		font-weight: bold;
		color: #4F94CD;
		margin-bottom: 1.5rem;
}
.line-item{
	&:hover{
		cursor: pointer;
		color: #409EFF;
	}
}
.more{
	text-align: left;
}
</style>